<div id="jsonModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="ri-braces-line"></i> JSON工具</h2>
            <button class="close-btn"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body">
            <div class="button-group">
                <button id="formatJson" class="action-btn">
                    <i class="ri-format-line"></i>
                    <span>格式化</span>
                </button>
                <button id="compressJson" class="action-btn">
                    <i class="ri-compress-line"></i>
                    <span>压缩</span>
                </button>
                <button id="escapeJson" class="action-btn">
                    <i class="ri-code-line"></i>
                    <span>转义</span>
                </button>
                <button id="unescapeJson" class="action-btn">
                    <i class="ri-code-s-slash-line"></i>
                    <span>反转义</span>
                </button>
                <button id="copyJson" class="action-btn">
                    <i class="ri-file-copy-line"></i>
                    <span>复制</span>
                </button>
            </div>
            <div class="input-container">
                <div class="line-numbers" id="lineNumbers"></div>
                <textarea id="jsonInput" placeholder="请输入JSON文本..." spellcheck="false"></textarea>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('jsonModalComponent').innerHTML = document.getElementById('jsonModal').outerHTML;
</script> 